{% extends "OspHomeBundle::layout.html.twig" %}

{% block OspHome_body %}
	<h3>Produits en vente</h3>
	<hr>
	<script type="text/javascript" src="{{ asset('js/jquery.tablesorter.js') }}"></script>

	<!-- Ajout DropDownList filtre catégorie -->
	<select class="selectpicker" id="ddl_categorie" onChange="updateTable();">
		<option value="tous">Tous</option>
		{% for categ in categorie %}
			<option value={{categ.libelle}}>{{categ.libelle}}</option>
		{% endfor %}
	</select>

	<ul class="nav nav-pills nav-stacked">
		<table class="table table-striped" id="dataTable">
			<thead>
				<tr>
					<th>Photo</th>
					<th>Catégorie</th>
					<th>Libellé</th>
					<th>Description</th>
					<th>Lien</th>
					<th>Poids</th>
					<th>Prix</th>
				</tr>
			</thead>
			
			<tbody>
				{% for product in products %}
				<tr>
					<td><a href="{{ path('osp_home_showProduct', {'id' : product.id}) }}"><img src="{{asset('img/')}}{{ product.photo }}" alt={{product.photo}} height="120" width="120" /></a></td>
					<td>{{product.categorie.libelle}}</td>
					<td><a href="{{ path('osp_home_showProduct', {'id' : product.id}) }}">{{product.libelle}}</td>
					<td>{{ product.description | truncate(20, true, '...') }}</a></td>
					<td>{{product.lien}}</td>
					<td>{{product.poids ~ ' kg'}}</td>
					<td>{{product.prix ~ ' €'}}</td>
					<td>
						<a href="{{ path('osp_home_addProduct', {'id' : product.id}) }}">
							<img src="{{ asset('img/addShoppingCart.png') }}" alt="Ajouter au panier" height="27" width="27" />
						</a>
					</td>
				</tr>	
				{% endfor %}
			</tbody>
		</table>

		{%if error%}
		{{error}}
		{%endif%}

		<script  language="JavaScript">

			$(document).ready(function() 
    		{ 
        		$("#dataTable").tablesorter(); 
    		} ); 

			function updateTable()
			{
				var rows = document.getElementById("dataTable").rows;
				var ddl_categorie = document.getElementById("ddl_categorie");
				var categorie = ddl_categorie.options[ddl_categorie.selectedIndex].value;

				for (var i=1; i<rows.length; i++) 
				{

					if(categorie == "tous")
					{
						rows[i].style.display = '';
					}

					else 
					{
						if(rows[i].cells[1].innerHTML != categorie)
						{
							rows[i].style.display = 'none';
						}

						else
						{
							rows[i].style.display = '';
						}
					}
				}		
			}
		</script>
{% endblock %}